<template>
  <el-drawer
    class="basic-drawer"
    :title="title"
    :visible.sync="isShow"
    v-bind="newAttrs"
  >
    <slot />
  </el-drawer>
</template>

<script>
const defaultAttrs = {
  size: 'none',
  customClass: 'popup',
  closeOnClickModal: false,
  appendToBody: true,
  destroyOnClose: true,
};

export default {
  name: 'BasicDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '查看详情',
    },
  },
  data() {
    return {
      newAttrs: {},
    };
  },
  computed: {
    isShow: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      },
    },
  },
  created() {
    this.newAttrs = { ...defaultAttrs, ...this.$attrs };
  },
};
</script>
<style lang="scss">
.basic-drawer {
  .popup {
    min-width: 200px;
  }
}
</style>
